<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-demo="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .router-link-active {
            color:#f00;
        }
    </style>
</head>
<body>

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <router-link to="/user/001/post/p-001?token=a1b2c3d4e5f6">User-001</router-link>
        <router-link to="/user/002/post/p-002?token=1a2b3c4d5e6f">User-002</router-link>
    </p>
    <router-view></router-view>
</div>


</body>
<script src="../../../vender/vue@2.4.2.js"></script>
<script src="../../../vender/vue-router@2.7.0.js"></script>

<script>

    const User={
        template:'<div>User-id:{{ $route.params.id }},Post-id:{{$route.params.postId}},Token:{{$route.query.token}}</div>',
        watch:{
            '$route'(to,from){
                console.log('to:',to);
                console.log('from:',from);
            }
        }
    };

    const router=new VueRouter({
        routes:[
            {path:'/user/:id/post/:postId',component:User}
        ]
    });

    const app=new Vue({
        router
    }).$mount('#app');

</script>
</html>